<template>
  <div>
    <div class="box1">
      <!-- 上一盒子 (已完成)-->
      <div class="topOne">
        <div class="topLeft">
          <div class="topLeft-header">
            工单统计<span class="topLeft-header-sub"
              >2023.04.01 ~ 2023.04.12</span
            >
          </div>
          <div class="topLeft-body">
            <div class="topLeft-body-stats">
              <div class="topLeft-body-stats-item">
                <div class="topLeft-body-stats-item-num">{{ workTotal }}</div>
                <div class="topLeft-body-stats-item-text">工单总数(个)</div>
              </div>
            </div>
            <div class="topLeft-body-stats">
              <div class="topLeft-body-stats-item">
                <div class="topLeft-body-stats-item-num">
                  {{ completedTotal }}
                </div>
                <div class="topLeft-body-stats-item-text">完成工单(个)</div>
              </div>
            </div>
            <div class="topLeft-body-stats">
              <div class="topLeft-body-stats-item">
                <div class="topLeft-body-stats-item-num">
                  {{ progressTotal }}
                </div>
                <div class="topLeft-body-stats-item-text">进行工单(个)</div>
              </div>
            </div>
            <div class="topLeft-body-stats">
              <div class="topLeft-body-stats-item">
                <div class="topLeft-body-stats-item-num">{{ cancelTotal }}</div>
                <div class="topLeft-body-stats-item-text">取消工单(个)</div>
              </div>
            </div>
          </div>
        </div>
        <div class="topZhong">
          <div class="topZhong-header">
            销售统计<span class="topZhong-header-sub"
              >2023.04.01 ~ 2023.04.12</span
            >
          </div>
          <div class="topZhong-body">
            <div class="topZhong-body-stats">
              <div class="topZhong-body-stats-item">
                <div class="topZhong-body-stats-item-num">{{ orderNum }}</div>
                <div class="topZhong-body-stats-item-text">订单量(个)</div>
              </div>
            </div>
            <div class="topZhong-body-stats">
              <div class="topZhong-body-stats-item">
                <div class="topZhong-body-stats-item-num">{{ ordermoney }}</div>
                <div class="topZhong-body-stats-item-text">销售额(万元)</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 折线图/柱状图 -->
        <div class="zhongBox">
          <div class="zhongBox_header">
            销售数据<span class="zhongBox_header_sub"
              >2023.01.01 - 2023.04.12</span
            >
            <div class="zhongBox_header_button">
              <div
                class="zhongBox_header_button_item"                :class="{ isChecked: a === '周' }"
                @click="ClassDate('周')"
              >
                周
              </div>
              <div
                class="zhongBox_header_button_item"
                :class="{ isChecked: a === '月' }"
                @click="ClassDate('月')"
              >
                月
              </div>
              <div
                class="zhongBox_header_button_item"
                :class="{ isChecked: a === '年' }"
                @click="ClassDate('年')"
              >
                年
              </div>
            </div>
          </div>
          <div class="zhongBox_body">
            <div id="zhongBox_zhe"></div>
            <div id="zhongBox_zhu"></div>
          </div>
        </div>
      </div>
      <div class="topRight">
        <div class="topRight-header">
          商品热榜<span class="topRight-header-sub"
            >2023.04.01 ~ 2023.04.12</span
          >
        </div>
        <div class="topRight-body">
          <!-- 1 -->
          <div class="topRight-body-item">
            <div class="topRight-body-num">1</div>
            <div class="topRight-body-name">{{ num1.skuName }}</div>
            <div class="topRight-body-total">{{ num1.count }}单</div>
          </div>
          <!-- 2 -->
          <div class="topRight-body-item">
            <div class="topRight-body-num2">2</div>
            <div class="topRight-body-name">{{ num2.skuName }}</div>
            <div class="topRight-body-total">{{ num2.count }}单</div>
          </div>
          <!-- 3 -->
          <div class="topRight-body-item">
            <div class="topRight-body-num3">3</div>
            <div class="topRight-body-name">{{ num3.skuName }}</div>
            <div class="topRight-body-total">{{ num3.count }}单</div>
          </div>
          <!-- 4-7 -->
          <div
            class="topRight-body-item"
            v-for="(item, index) in fourSeven"
            :key="index"
          >
            <div class="topRight-body-num4">{{ index + 4 }}</div>
            <div class="topRight-body-name">{{ item.skuName }}</div>
            <div class="topRight-body-total">{{ item.count }}单</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottomLeft">
        <div class="bottomLeft-header">
          合作商点位数Top5
          <div class="iconfont icon-gengduo"></div>
        </div>
        <div class="bottomLeft-body">
          <div id="bottomLeft-body-left"></div>
          <div class="bottomLeft-body-right">
            <div class="count">{{ pienum }}</div>
            <div class="name">点位数</div>
            <div class="count2">{{ pieHezuonum }}</div>
            <div class="name2">合作商数</div>
          </div>
        </div>
      </div>
      <div class="bottomRigtht">
        <div class="bottomRigtht-header">
          异常设备监控
          <div class="iconfont icon-gengduo"></div>
        </div>
        <div class="bottomRigtht-imgBox">
          <img
            class="bottomRigtht-Img"
            src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// saleLineFig
// CooperativeStatistics 合作商点位汇总统计(饼图数据)
import {
  getWorkOrder,
  ordersTotal,
  orderMoney,
  productRank,
  saleLineFig,
  pointPieDate,
  pieNumber,
  pieHezuoNum
} from '@/api/index'
export default {
  name: 'home-page',
  components: {},
  props: {},
  data() {
    return {
      // 工单统计
      workDate: [],
      // 销售统计
      orderNum: '',
      ordermoney: '',
      // 商品排行1
      num1: '',
      // 商品排行2
      num2: '',
      // 商品排行3
      num3: '',
      // 商品排行4-7
      fourSeven: '',
      // 判断样式变量
      a: '周',
      pienum: '',
      pieHezuonum: '',
      piedate: '',
      arr: []
    }
  },
  async mounted() {
    console.log(this.arr)
    console.log(this.weekday)
    console.log(this.piedate)
    // 基于准备好的dom，初始化echarts实例
    const myChart1 = echarts.init(document.getElementById('zhongBox_zhe'))
    const myChart2 = echarts.init(document.getElementById('zhongBox_zhu'))

    // 绘制图表
    myChart1.setOption({
      title: [
        {
          text: '销售额趋势图',
          left: 'center',
          textStyle: {
            color: '#333',
            fontStyle: 'normal',
            fontSize: 15
          }
        },
        {
          subtext: '单位: 元',
          color: '#999',
          fontSize: 13,
          left: '3%', // 标题的位置 默认是left，其余还有center、right属性
          top: '4%'
        }
      ],

      xAxis: {
        boundaryGap: false,
        type: 'category',
        data: ['星期一', '星期二', '星期三', '星期四']
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            type: 'solid',
            width: 2,
            color: '#d9d9d9'
          }
        },
        formatter: '{a}:{c}' + '<br/>' + '{b}'
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          symbolSize: 5,
          data: [2629.1, 4356.05, 0, 0],
          type: 'line',
          itemStyle: {
            color: '#c4473d'
          },
          smooth: true,
          lineStyle: {
            color: '#ec635e'
          },
          areaStyle: {
            color: 'rgb(249,237,236)'
          }
        }
      ]
    })
    myChart2.setOption({
      title: [
        {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            color: '#333',
            fontStyle: 'normal',
            fontSize: 15
          }
        },
        {
          subtext: '单位: 元',
          color: '#999',
          fontSize: 13,
          left: '3%', // 标题的位置 默认是left，其余还有center、right属性
          top: '4%'
        }
      ],
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'line',
          lineStyle: {
            type: 'solid',
            width: 2,
            color: '#d9d9d9'
          }
        },
        formatter: '{a}:{c}' + '<br/>' + '{b}'
      },
      xAxis: {
        type: 'category',
        data: ['北京平西府街道', '霍营街道']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          barCategoryGap: '20%',
          barWidth: 15, // 柱图宽度
          data: [8535.01, 1164.33],
          type: 'bar',
          itemStyle: {
            color: '#97aff9',
            barBorderRadius: 4
          }
        }
      ]
    })
    // 合作商点位汇总(饼图)
    const pieDate = await pointPieDate()
    console.log(pieDate)
    this.piedate = pieDate
    this.drawLine()
  },
  computed: {
    weekday() {
      return this.arr.map((dateString) => {
        const date = new Date(dateString)
        const weekdays = [
          '星期日',
          '星期一',
          '星期二',
          '星期三',
          '星期四',
          '星期五',
          '星期六'
        ]
        return weekdays[date.getDay()]
      })
    },
    workTotal() {
      return this.workDate.reduce((prev, item) => prev + item.total, 0)
    },
    completedTotal() {
      return this.workDate.reduce((prev, item) => prev + item.completedTotal, 0)
    },
    progressTotal() {
      return this.workDate.reduce((prev, item) => prev + item.progressTotal, 0)
    },
    cancelTotal() {
      return this.workDate.reduce((prev, item) => prev + item.cancelTotal, 0)
    }
  },
  // 在js中不帮解析图片路径  可以用require()包裹/
  async created() {
    // 饼图合作商数
    const piehezuoNum = await pieHezuoNum()
    console.log(piehezuoNum)
    this.pieHezuonum = piehezuoNum
    // 饼图点位数
    const pieNum = await pieNumber()
    console.log(pieNum)
    this.pienum = pieNum
    const linelist = await saleLineFig({
      collectType: 1,
      start: '2023-04-10',
      end: '2023-04-13'
    })
    // 折线图数据(周)

    console.log(linelist)

    this.arr = linelist.xAxis
    console.log(this.arr)

    // 工单统计
    const res = await getWorkOrder({
      start: '2023-04-01 00:00:00',
      end: '2023-04-13 23:59:59'
    })
    // console.log(res)
    this.workDate = res
    // console.log(this.workTotal)
    // 销售统计
    const res1 = await ordersTotal({
      start: '2023-04-01 00:00:00',
      end: '2023-04-13 23:59:59'
    })
    // console.log(res1)
    this.orderNum = res1
    // 销售金额
    const res2 = await orderMoney({
      start: '2023-04-01 00:00:00',
      end: '2023-04-12 23:59:59'
    })
    // console.log(res2)
    const num = res2
    const result = (num / 1000000).toFixed(2)
    this.ordermoney = result
    // 商品排行
    const res3 = await productRank({
      topValue: 10,
      start: '2023-04-01',
      end: '2023-04-12'
    })
    // console.log(res3)
    const a = res3
    this.num1 = a[0]
    a.splice(0, 1)
    // console.log(this.num1)
    this.num2 = a[0]
    a.splice(0, 1)
    // console.log(this.num2)
    this.num3 = a[0]
    a.splice(0, 1)
    // console.log(this.num3)
    this.fourSeven = a
    // console.log(this.fourSeven)
    // 合作商点位汇总统计
    // const res4 = await CooperativeStatistics()
    // console.log(res4)
  },
  methods: {
    // 周月年样式切换效果
    ClassDate(date) {
      this.a = date
    },
    // 图表1（饼图)
    drawLine() {
      const myChart3 = echarts.init(
        document.getElementById('bottomLeft-body-left')
      )
      myChart3.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function (args) {
            // console.log(args)
            return args.name + '<br/>' + '总占比:' + args.percent + '%'
          }
        },

        series: [
          {
            name: 'Access From',
            type: 'pie',
            lineStyle: {
              color: '#dfdfdf'
            },
            label: {
              show: true,
              formatter: function (args) {
                // console.log(args)
                return args.name + '\n' + args.percent + '%'
              }
            },
            labelLine: {
              show: true,
              smooth: 1
            },
            itemStyle: {
              color: function (colors) {
                const colorList = [
                  '#9ab6f9',
                  '#bcfdd3',
                  '#f6c49e',
                  '#e0feff',
                  '#d4dffa'
                ]
                return colorList[colors.dataIndex]
              }
            },
            radius: ['30%', '70%'],
            roseType: 'radius',
            data: this.piedate,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
// 每个盒子都得加padding20px 并盒子内减
.box1 {
  display: flex;
  // flex-wrap: wrap;
  .topOne {
    display: flex;
    flex-wrap: wrap;
    width: 892px;
    height: 166px;
    // background-color: red;
    .topLeft {
      display: flex;
      flex-direction: column;
      padding: 20px;
      box-sizing: border-box;
      width: 482px;
      height: 100%;
      border-radius: 20px;
      background: #e9f3ff;
      background-image: url(),
        url(https://likede2-admin.itheima.net/img/task.66b715b7.png);
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, calc(100% - 12px) 100%;
      margin-right: 16px;
      .topLeft-header {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        .topLeft-header-sub {
          margin-left: 10px;
          font-size: 12px;
          font-weight: 600;
          color: #999;
        }
      }
      .topLeft-body {
        display: flex;
        flex: 1;
        width: 443px;
        height: 107px;
        // background-color: red;
        .topLeft-body-stats {
          width: 112px;
          height: 107px;
          // background-color: pink;
          margin-right: 7px;
          display: flex;
          justify-content: center;
          align-items: center;
          .topLeft-body-stats-item {
            display: flex;
            flex-direction: column;
            .topLeft-body-stats-item-num {
              font-size: 36px;
              height: 50px;
              font-weight: 600;
              line-height: 52px;
              color: #072074;
              text-shadow: 2px 4px 7px rgba(8, 132, 255, 0.5);
            }
            .topLeft-body-stats-item-text {
              color: #91a7dc;
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              font-weight: 400;
              line-height: 17px;
            }
          }
        }
      }
    }
    .topZhong {
      padding: 20px;
      box-sizing: border-box;
      width: 392px;
      height: 100%;
      border-radius: 20px;
      // background-color: blue;
      background: #fbefe8
        url(https://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
        calc(100% - 12px) 100%;
      .topZhong-header {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        .topZhong-header-sub {
          margin-left: 10px;
          font-size: 12px;
          font-weight: 600;
          color: #999;
        }
      }
      .topZhong-body {
        display: flex;
        flex: 1;
        width: 358px;
        height: 107px;
        // background-color: blue;
        .topZhong-body-stats {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 7px;
          width: 185px;
          height: 107px;
          // background-color: greenyellow;
          .topZhong-body-stats-item {
            display: flex;
            flex-direction: column;
            .topZhong-body-stats-item-num {
              text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
              color: #ff5757;
              height: 50px;
              font-size: 36px;
              font-weight: 600;
              line-height: 49px;
            }
            .topZhong-body-stats-item-text {
              color: #de9690;
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              font-weight: 400;
              line-height: 17px;
            }
          }
        }
      }
    }
  }
  .topRight {
    padding: 20px;
    box-sizing: border-box;
    width: 300px;
    height: 538px;
    // background-color: pink;
    border-radius: 20px;
    background: #fff;
    flex-direction: column;
    margin-left: 13px;
    .topRight-header {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      .topRight-header-sub {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 600;
        color: #999;
      }
    }
    .topRight-body {
      .topRight-body-item {
        display: flex;
        width: 253px;
        height: 24px;
        // background-color: pink;
        margin-top: 22px;
        .topRight-body-num {
          width: 21px;
          height: 20px;
          // background-color: red;
          margin-left: 8px;
          background: url();
          color: #8e5900;
          text-align: center;
          font-size: 12px;
          font-weight: 400;
          line-height: 14px;
        }
        .topRight-body-num2 {
          width: 21px;
          height: 20px;
          // background-color: red;
          margin-left: 8px;
          background: url();
          color: #494949;
          text-align: center;
          font-size: 12px;
          font-weight: 400;
          line-height: 14px;
        }
        .topRight-body-num3 {
          width: 21px;
          height: 20px;
          // background-color: red;
          margin-left: 8px;
          background: url();
          color: #cf6d3d;
          text-align: center;
          font-size: 12px;
          font-weight: 400;
          line-height: 14px;
        }
        .topRight-body-num4 {
          width: 21px;
          height: 20px;
          background: url();
          margin-left: 8px;
          color: #e9b499;
          text-align: center;
          font-size: 12px;
          font-weight: 400;
          line-height: 14px;
        }
        .topRight-body-name {
          font-size: 14px;
          font-weight: 450;
          color: #333;
          line-height: 20px;
          width: 137px;
          height: 20px;
          // background-color: red;
          margin-left: 23px;
        }
        .topRight-body-total {
          width: 63px;
          height: 20px;
          // background-color: red;
          margin-left: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #737589;
          line-height: 20px;
          text-align: right;
        }
      }
    }
  }
  .zhongBox {
    padding: 20px;
    box-sizing: border-box;
    width: 890px;
    border-radius: 20px;
    background: #fff;
    margin-top: 20px;
    height: 352px;
    .zhongBox_body {
      display: flex;
      margin-top: 10px;
      #zhongBox_zhe {
        width: 435px;
        height: 332px;
        // background-color: red;
        margin-right: 6px;
      }
      #zhongBox_zhu {
        width: 435px;
        height: 332px;
        // background-color: blue;
      }
    }

    .zhongBox_header {
      position: relative;
      font-size: 18px;
      font-weight: 600;
      color: #333;
      .zhongBox_header_button {
        position: absolute;
        top: -38%;
        right: 1%;
        width: 129px;
        height: 34px;
        border-radius: 10px;
        background-color: rgba(233, 243, 255, 0.37);
        display: flex;
        justify-content: center;
        align-items: center;
        // text-align: center;
        .zhongBox_header_button_item {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 37px;
          height: 25px;
          font-size: 14px;
          color: #9ca3b4;
          cursor: pointer;
        }
      }
      .zhongBox_header_sub {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 600;
        color: #999;
      }
    }
  }
}
.bottom {
  margin-top: 20px;
  display: flex;
  .bottomLeft {
    padding: 20px;
    box-sizing: border-box;
    width: 710px;
    height: 353px;
    background: #fff;
    border-radius: 20px;
    .bottomLeft-body {
      display: flex;
      margin-top: 8px;
      width: 680px;
      height: 300px;
      // background-color: red;
      #bottomLeft-body-left {
        width: 475px;
        height: 284px;
        // background-color: pink;
      }
      .bottomLeft-body-right {
        box-sizing: border-box;
        padding: 47px 0px 0px 38px;
        background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
          linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
          linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
          linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        width: 158px;
        height: 230px;
        margin-top: 25px;
        margin-left: 28px;
        .count {
          height: 33px;
          font-size: 24px;
          font-weight: 600;
          color: #072074;
          line-height: 33px;
        }
        .name {
          height: 17px;
          margin-top: 6px;
          font-size: 12px;
          font-weight: 400;
          color: #000412;
          line-height: 17px;
        }
        .count2 {
          height: 33px;
          font-size: 24px;
          font-weight: 600;
          color: #072074;
          line-height: 33px;
          margin-top: 18px;
        }
        .name2 {
          height: 17px;
          margin-top: 6px;
          font-size: 12px;
          font-weight: 400;
          color: #000412;
          line-height: 17px;
        }
        // background-color: blue;
      }
    }
    .bottomLeft-header {
      width: 669px;
      height: 18.5px;
      // background-color: red;
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      font-weight: 600;
      color: #333;
      .iconfont,
      .icon-gengduo {
        color: #5f84ff;
        cursor: pointer;
      }
    }
  }
  .bottomRigtht {
    padding: 20px;
    box-sizing: border-box;
    width: 500px;
    height: 353px;
    border-radius: 20px;
    background: #fff;
    margin-left: 14px;
    .bottomRigtht-imgBox {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .bottomRigtht-Img {
        width: 150px;
        height: 120px;
      }
    }
    .bottomRigtht-header {
      display: flex;
      justify-content: space-between;
      width: 446px;
      height: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      .iconfont,
      .icon-gengduo {
        color: #5f84ff;
        cursor: pointer;
      }
    }
  }
}
// 周月年样式切换效果
.isChecked {
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.11);
  border-radius: 7px;
  font-weight: 600;
  color: #333 !important;
}
</style>
